

<template>
  <!--定义导航标签--声明式导航  -->
  <ul v-if="$route.meta.isshow">
    <li>
      <router-link to="/home?name=lily&age=20">首页</router-link>
    </li>
    <li>
      <router-link :to="{
        path: '/category', query: {
          name: '小明', age: 15
        }
      }">分类</router-link>
    </li>
    <li>
      <router-link :to="`/car/${id}/${id1}`">购物车</router-link>
    </li>
    <li>
      <router-link to="/mine">我的</router-link>
    </li>
  </ul>

  <!-- 编程式导航 -->
  <!-- <ul>
    <li @click="gotopage('/home')">首页</li>
    <li @click="gotopage('/category')">分类</li>
    <li @click="gotopage('/car')">购物车</li>
    <li @click="gotopage('/mine')">我的</li>
  </ul> -->

  <!-- 定义路由组件存放的坑 -->
  <router-view></router-view>
</template>
<script>
export default {
  data() {
    return {
      id: 999,
      id1: 10000
    }
  },
  components: {

  },
  methods: {
    gotopage(path) {
      // this.$router.push(path)
      // this.$router.push({ path: path, query: { name: '小红' } })
      // this.$router.push({ name: path.substr(1) })
      this.$router.push(`${path}/${this.id}/${this.id1}`)
    }
  }

}
</script>
<style>
/* app.vue 是根组件, 一般不用设置,一般可以作为全局样式使用  */
@import url('./assets/base.css');

ul {
  list-style: none;
  display: flex;

}

li {
  margin: 10px 20px;
}

.router-link-active {
  background-color: red;
}
</style>
